<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单和按钮</title>
	<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body class="table-responsive">
	<!-- 
		1.对table
			1)	.table类 								//其他类都在此基础上添加
			2)	.table-striped类						//条纹，斑马线效果,从tbody第一行开始
			3) 	.table-bordered类
			4）	.table-hover类

		2.对tr/th/td(需要在有设置table-hover下)
			1)	.active类
			2)	.success类
			3)	.info类
			4)	.warning类
			5)	.danger类

		3.对tr或td
			1) 	.sr-only类								//隐藏行或单元格(实质上会删除该行或清空该单元格内容),类似与display：none

		4.响应式对	(table的父级)
			1)	.table-responsive类						//对容器添加

				注	: 需要在没有给table设置table-bordered下,加给table的直接父级，这里是body
				效果：当table宽度小于768px时出现边框
	-->	

	<!-- <table class="table table-striped table-bordered table-hover"> -->
	<!-- <table class="table table-bordered table-hover"> -->
	<table class="table table-hover">
		<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
		</thead>
		<tbody>
			<tr class="active">
				<td>1</td>
				<td>张三</td>
				<td>男</td>
				<td>24</td>
			</tr>
			<tr class="success">
				<td>2</td>
				<td>李四</td>
				<td>女</td>
				<td>18</td>
			</tr>
			<tr class="info">
				<td>3</td>
				<td>王五</td>
				<td>女</td>
				<td>23</td>
			</tr>
			<tr class="warning">
				<td>4</td>
				<td>赵六</td>
				<td>男</td>
				<td>22</td>
			</tr>
			<tr class="danger">
				<td>5</td>
				<td>王一</td>
				<td>女</td>
				<td>20</td>
			</tr>
		</tbody>
	</table>


	<script src="bootstrap-3.3.5-dist/jquery/jquery.min.js"></script>
	<script src="bootstrap-3.3.5-dist/bootstrap/bootstrap.min.js"></script>
</body>
</html>